<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>房子</title>
    <style>
        canvas {
            border: solid 1px blue;
        }
    </style>
</head>

<body>
    <canvas width="600" height="600" id="can">
        浏览器版本过低，请升级版本
    </canvas>
	<h2>好谷</h2>
    <script>
        var ctx = document.querySelector("#can").getContext("2d");
        //    三角形
        ctx.beginPath();
        ctx.moveTo(300, 20);
        ctx.lineTo(100, 220);
        ctx.lineTo(500, 220);
        ctx.closePath();
        ctx.stroke();
        ctx.fillStyle = "red";
        ctx.fill();
        // 大正方形
        ctx.beginPath();
        ctx.rect(150, 220, 300, 250);
        ctx.fillStyle = "yellow";
        ctx.fill();
        ctx.closePath();
        ctx.stroke();

        // 三个白色正方形
        ctx.clearRect(200, 250, 50, 50);
        ctx.clearRect(350, 250, 50, 50);
        ctx.clearRect(250, 360, 100, 100);

        // 半圆
        ctx.beginPath();
        ctx.moveTo(300, 360);
        var x0 = 300;
        var y0 = 360;
        var r = 50;
        var start = 0 * Math.PI / 180;
        var end = 180 * Math.PI / 180;
        ctx.arc(x0, y0, r, start, end, true);
        ctx.closePath();
        ctx.strokeStyle = "white";
        ctx.stroke();
        ctx.fillStyle = "white";
        ctx.fill();
        // 红色的线
        ctx.beginPath();
        ctx.rect(250, 360, 100, 2);
        ctx.fillStyle = "red";
        ctx.fill();
        ctx.closePath();
        ctx.stroke();

        // 字体house
        ctx.font = "48px 宋体";
        ctx.fillText("House", 60, 110);
    </script>
</body>

</html>